<!-- 首页 -->
<template>
	<div class="app-container home">
		<!-- 统计卡片 -->
		<StatisticsCard />
		<!-- 图表 -->
		<XdcFilters :data="filtersData" />
		<Chart />
		<!-- 事项卡片 -->
		<el-row :gutter="30">
			<el-col :span="12">
				<ScheduleCard />
			</el-col>
			<el-col :span="6">
				<PendingTaskCard />
			</el-col>
			<el-col :span="6">
				<ProblemCard />
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import StatisticsCard from './components/StatisticsCard.vue';
import XdcFilters from '@/components/XdcFilters/XdcFilters.vue';
import Chart from './components/Chart.vue';
import ScheduleCard from './components/scheduleCard.vue';
import PendingTaskCard from './components/PendingTaskCard.vue';
import ProblemCard from './components/ProblemCard.vue';
import opts from '@/utils/opts';
import { projects, projectLeaders } from '@/mock/project.mock';

const filtersData = reactive({
	id: {
		placeholder: '项目',
		options: [],
		value: null,
		textField: 'name',
		valueField: 'id',
		loading: false,
		query: (str: string) => {
			filtersData.id.loading = true;
			str = str?.trim();
			const textField = filtersData.id.textField;
			setTimeout(() => {
				filtersData.id.loading = false;
				if (str.length) {
					filtersData.id.options = projects.filter(item => item[textField].indexOf(str) >= 0);
				} else {
					filtersData.id.options = projects;
				}
			}, 300);
		},
	},
	leader: {
		placeholder: '项目负责人',
		options: [],
		value: null,
		textField: 'name',
		valueField: 'id',
		loading: false,
		query: (str: string) => {
			filtersData.leader.loading = true;
			str = str?.trim();
			const textField = filtersData.leader.textField;
			setTimeout(() => {
				filtersData.leader.loading = false;
				if (str.length) {
					filtersData.leader.options = projectLeaders.filter(
						item => item[textField].indexOf(str) >= 0
					);
				} else {
					filtersData.leader.options = projectLeaders;
				}
			}, 300);
		},
	},
	status: {
		placeholder: '项目状态',
		options: [],
		value: null,
		textField: 'text',
		valueField: 'value',
		loading: false,
		query: (str: string) => {
			filtersData.status.loading = true;
			str = str?.trim();
			const textField = filtersData.status.textField;
			setTimeout(() => {
				filtersData.status.loading = false;
				if (str.length) {
					filtersData.status.options = opts.projectStatus.filter(
						item => item[textField].indexOf(str) >= 0
					);
				} else {
					filtersData.status.options = opts.projectStatus;
				}
			}, 300);
		},
	},
});
</script>
